<template>
  <thead>
  <tr>
    <th
        v-for="header in headers"
        :key="header.field"
        :style="getHeaderStyle(header)"
    >
      {{ header.text }}
    </th>
  </tr>
  </thead>
</template>

<script>
export default {
  name: 'TableHeader',
  props: {
    headers: {
      type: Array,
      required: true
    }
  },

  setup() {
    const getHeaderStyle = (header) => {
      return header.width ? { width: header.width, minWidth: header.width } : {}
    }

    return {
      getHeaderStyle
    }
  }
}
</script>
